<template>
	<view class="silder pt-8 pb-8" ref="silder">
		<template v-if="isType">
			<text :class="{active:value==-1}" @click="tapIdx(-1)">精选</text>
			<template v-for="(item,index) in listArr">
				<text :class="{active:value==index}" @click="tapIdx(index)">{{item[values]}}</text>
			</template>
		</template>
		<template v-else>
			<template v-for="(item,index) in listArr">
				<text :class="{active:value==index}" @click="tapIdx(item,index)">{{item}}</text>
			</template>
		</template>
	</view>
</template>

<script>
	import { isEmpty } from '@/libs/fn/verify.js'
	export default {
		name: "m-sliding",
		data() {
			return {
				isType: false, //默认取数组的值
				allNode: [],
				OffsetLeft: [],
			};
		},
		props: {
			keys: {
				type: String,
				default: ''
			},
			values: {
				type: String,
				default: ''
			},
			obj: {
				type: Array,
				default: () => [],
			},
			list: {
				type: Array,
				default: () => [],
			},
			value: {
				type: Number,
				default: -1,
			},

		},
		computed: {
			listArr() {
				if (isEmpty(this.list)) {
					this.isType = true;
				}
				console.log('obj',this.obj)
				return this.isType ? this.obj : this.list
			},
		},
		mounted() {
			// this.$nextTick(() => {
			// 	this.init();
			// })
		},
		methods: {
			tapIdx(id) {
				this.$emit("input", id);
			},
			init() {
				// const nodeLeft = this.$refs.silder.$el;
				// const allNode = [...nodeLeft.querySelectorAll(this.nodeName)]
				// this.allNode = allNode;
				// //每块距离
				// let OffsetLeft = [];
				// //获取左侧每一块的距离顶部的偏移量
				// allNode.forEach(item => {
				// 	OffsetLeft.push(Number(item.offsetLeft))
				// })
				// this.OffsetLeft = OffsetLeft;
			},


			//判断遮挡情况
			crosswise() {
				const silderNode = this.$refs.silder.$el;
				const current = this.allNode[this.idx].clientWidth;
				// //单块宽度
				// const firstChild = silderNode.firstElementChild.clientWidth;
				//总高度
				const { clientWidth, scrollLeft } = silderNode;
				//当前块
				const cardScrollLeft = this.OffsetLeft[this.idx]

				const leftNum = cardScrollLeft - scrollLeft;
				// 小于当前块的显示区域时 表示被遮挡
				if (leftNum <= current) {
					silderNode.scrollTo({
						top: 0,
						left: cardScrollLeft - cardScrollLeft,
						behavior: 'smooth'
					});
				}
				//大于总高度时  表示在下面
				if (leftNum > clientWidth - current) {
					silderNode.scrollTo({
						top: 0,
						left: cardScrollLeft - clientWidth,
						behavior: 'smooth'
					});
				}
			},
		},
	}
</script>

<style lang="scss">
	.silder {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;

		text {
			display: inline-block;
			padding: 0 20rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;

			flex-shrink: 0;
			border-radius: 10rpx;
			margin-right: 20rpx;
			background:rgba(255,255,255, .3);
			border-radius: 24rpx;

			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255,255,255,1);
		}

		.active {
			background: #fff;
			color:var(--theme);

		}
	}
</style>
